<template>
	<view class="box">
		<van-nav-bar title="待发货" left-text="返回" left-arrow @click-left="onClickLeft" />
		<view class="title">预计下单成功后2天内发货，最晚明天内发货</view>
		<!-- 地址 -->
		<view class="address">
			<div class="top">
				<van-icon name="location-o" />
				<text class="name">{{address.name}}</text>
				<text class="phone">86-{{address.tel}}</text>
			</div>
			<div class="bottom">
				<text class="pro">{{address.province}}</text>
				<text>{{address.city}}</text>
				<text>{{address.county}}</text>
				<text>{{address.addressDetail}}</text>
			</div>
		</view>
		<!-- 商品 -->
		<div class="goods">
			<van-swipe-cell v-for="item in userList" :key="item.id">
				<van-card :num="item.num" :price="item.goods_price" :desc="item.goods_styles" :title="item.goods_name"
					class="goods-card" :thumb="item.goods_images" />
			</van-swipe-cell>
		</div>
		<div class="info">
			<view class="info-item">
				用户标识：{{id}}
			</view>
			<view class="info-item">
				支付方式：支付宝
			</view>
			<view class="info-item">
				商品快照：核对交易细节时，可作为判断依据
			</view>
			<view class="info-item">
				下单时间：{{time}}
			</view>
		</div>
		<view class="foot">蜀ICP备2023008183号-1</view>
		<van-action-bar>
			<van-button class="btn" plain hairline type="small">催发货</van-button>
			<van-button class="btn" plain hairline type="small">再次购买</van-button>
			<van-button class="btn" plain hairline type="small">设为匿名</van-button>
		</van-action-bar>
	</view>
</template>

<script>
	import api from "../../../api/api.js";
	export default {
		data() {
			return {
				order_info: "",
				address: "",
				time: "",
				userList: [],
				id: "",
			}
		},
		methods: {
			onClickLeft() {
				history.back();
			},
			getOrder(option) {
				api.getOrder(option).then(res => {
					this.order_info = res.data.data.order_info;
					this.address = res.data.data.address;
					this.time = res.data.data.time;
					this.id = this.order_info[0].user_id;
					for (var i = 0; i < this.order_info.length; i++) {
						this.userList.push(this.order_info[i].goods_info);
					}
				})
			}
		},
		onLoad(option) {
			this.getOrder(option);
		}
	}
</script>

<style>
	.box {
		height: 100%;
	}

	.title {
		margin: 20rpx auto;
		width: 500rpx;
		color: #505050;
		font-size: 12px;
	}

	.address {
		margin: 10rpx auto;
		width: 97%;
		background-color: white;
		border-radius: 10px;
	}

	.address .top {
		width: 90%;
		height: 30px;
		margin: 0 auto;
		text-align: left;
		line-height: 30px;
	}

	.address .top .name {
		font-size: 30rpx;
		margin-left: 5px;
	}

	.address .top .phone {
		color: #505050;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.address .bottom {
		width: 79%;
		margin: 0 auto;
		padding-bottom: 10px;
	}

	.pro {
		margin-left: 0px !important;
	}

	.address .bottom text {
		color: #505050;
		font-size: 24rpx;
		margin-left: 10px;
	}

	.goods-card {
		margin: 5px;
		background-color: white;
		border-radius: 7px;
	}

	.info {
		background-color: white;
		margin-top: 5px;
	}

	.info-item {
		margin-left: 20rpx;
		font-size: 12px;
		color: #505050;
		padding: 5px;
	}

	.btn {
		margin-left: 5px;
		margin-right: 10px;
	}

	/* 底部 */
	.foot {
		width: 300rpx;
		height: 39px;
		margin: 80rpx auto;
		display: block;
		font-size: 12px;
		text-align: center;
		line-height: 39px;
		color: #CCCCCC;
	}
</style>